<template>
  <div class="app-container">
    <ul class="tab">
      <el-button type="primary" v-for="(item, index) in tab" @click="change(index)">{{ item }}</el-button>
    </ul>
    <el-descriptions class="margin-top" :column="2" size="medium" border>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user" />
          桌号
        </template>
        {{openTableInfo.tableName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user" />
          开桌时间
        </template>
        {{openTableInfo.openStartTime}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone" />
          持续时间
        </template>
        {{openTableInfo.openTime}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline" />
          计费模式
        </template>
        {{openTableInfo.costName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline" />
          备注信息
        </template>
        {{openTableInfo.remark}}
      </el-descriptions-item>
    </el-descriptions>
    <el-row>
      <el-col :span="14">
        <div style="border-style: solid; border-width:1px;margin-top: 20px">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['mahjong:commodity:add']">新增会员</el-button>
          <el-table v-loading="loading" :data="openTableInfo.memberList" @selection-change="handleSelectionChange" :summary-method="getSummaries" show-summary>
            <el-table-column :label="'会员姓名'" align="center" prop="name" />
            <el-table-column :label="'开桌费用'" align="center" prop="openTableMoney" />
            <el-table-column :label="'商品费用'" align="center" prop="productMoney" />
            <el-table-column :label="'消费总额'" align="center" prop="consumeMoney" />
            <el-table-column :label="'会员余额'" align="center" prop="money"/>
            <el-table-column :label="'结账状态'" align="center" prop="status">
              <template slot-scope="scope">
                <span v-if="scope.row.status === '0'">未结账</span>
                <span v-else-if="scope.row.status === '1'">已停止计费</span>
                <span v-else-if="scope.row.status === '3'">已结账</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="300px">
              <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-shopping-cart-2" @click="handleUpdate(scope.row)" v-if="scope.row.status !== '3'">点单</el-button>
                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-if="scope.row.status === '0'">删除</el-button>
                <el-button size="mini" type="text" icon="el-icon-bank-card" @click="chongzhi(scope.row)">充值</el-button>
                <el-button size="mini" type="text" icon="el-icon-s-claim" @click="setDesk(scope.row)" v-if="scope.row.status !== '3'">买单</el-button>
                <el-button size="mini" type="text" icon="el-icon-printer" @click="onlyDesk(scope.row)">打印小票</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="10">
        <div style="border-style: solid; border-width:1px;margin-top: 20px">
          <el-table v-loading="loading" :data="openTableInfo.memberBuyList" @selection-change="handleSelectionChange">
            <el-table-column label="会员姓名" align="center" prop="memberName"/>
            <el-table-column label="商品名称" align="center" prop="productName"/>
            <el-table-column label="数量" align="center" prop="buyNumber"/>
            <el-table-column label="金额" align="center" prop="money"/>
            <el-table-column label="购买时间" align="center" prop="buyTime" width="150px"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleDeleteOrder(scope.row)" v-hasPermi="['mahjong:commodity:edit']">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>

    <el-dialog :title="title" :visible.sync="visible1" v-if="visible1" width="1040px">
      <dialogContent :close.sync="visible1" :detail="detail" @goLoadShop="getMoneyList" />
    </el-dialog>

    <!-- 积分兑换 -->
    <el-dialog title="修改备注" :visible.sync="remarkShow" width="500px">
      <el-form ref="form" :model="remarkform" :rules="rules" label-width="80px">
        <el-form-item label="备注信息" prop="remark">
          <el-input v-model="remark" type="text" placeholder="请输入新的备注信息"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
         <el-button @click="remarkShow = false">取消</el-button>
         <el-button type="primary" @click="saveRemark()">确认</el-button>
      </span>
    </el-dialog>
    <!-- 暂定计时 -->
    <el-dialog title="暂定计时" :visible.sync="reckonShow" width="500px">
      <el-form ref="form" :model="reckonform" :rules="rules" label-width="80px">
        <el-form-item label="暂定密码" prop="passWord">
          <el-input v-model="reckonform.passWord" type="password" placeholder="请输入新的备暂停计时密码"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="reckonShow = false">取消</el-button>
        <el-button type="primary" @click="saveReckon(1)">暂停</el-button>
        <el-button type="primary" @click="saveReckon(0)">开启</el-button>
      </span>
    </el-dialog>

    <!-- 积分兑换 -->
    <el-dialog title="增加会员" :visible.sync="memberShow" width="400px">
      <el-form ref="form" :model="saveform" :rules="rules">
        <el-form-item label="请选择会员" prop="">
          <el-select v-model="saveform.memberId" multiple filterable placeholder="请选择请选择会员">
            <el-option v-for="dict in memberList" :key="dict.id" :label="dict.name" :value="dict.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="memberShow = false">取消</el-button>
          <el-button type="primary" @click="saveMember()">确认</el-button>
      </span>
    </el-dialog>

<!--    <el-dialog :visible.sync="checkout" width="800px">-->
<!--      <el-table v-loading="loading" :data="openTableInfo.tmember" @selection-change="handleSelectionChange" :summary-method="getSummaries" show-summary>-->
<!--        <el-table-column :label="'会员姓名'" align="center" prop="name">-->
<!--          <template slot-scope="scope">-->
<!--            <span @click="getMember(scope.row.id)">{{ scope.row.name }}</span>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column :label="'开桌费用'" align="center" prop="deskAmount" />-->
<!--        <el-table-column :label="'商品信息'" align="center" prop="money" />-->
<!--        <el-table-column :label="'储值余额'" align="center" prop="storedMoney" />-->
<!--        <el-table-column :label="'赠送余额'" align="center" prop="sendMoney" />-->
<!--        &lt;!&ndash; <el-table-column :label="'结算类型'" align="center" prop="money">-->
<!--           <template slot-scope="scope">-->
<!--             <el-select v-model="scope.row.setType" placeholder="选择支付方式">-->
<!--               <el-option v-for="option in selectOptions" :key="option" :label="option" :value="option"></el-option>-->
<!--             </el-select>-->
<!--           </template>-->
<!--         </el-table-column>&ndash;&gt;-->
<!--        <el-table-column :label="'结算状态'" align="center" prop="status" :formatter="statusFormat" />-->
<!--        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="100px">-->
<!--          <template slot-scope="scope">-->
<!--            <el-button size="mini" type="text" icon="el-icon-edit" @click="setDesk(scope.row)" v-if="scope.row.status !== 3">结账开桌费用</el-button>-->
<!--            <el-button size="mini" type="text" icon="el-icon-edit" @click="chongzhi(scope.row)">充值</el-button>-->
<!--            <el-button size="mini" type="text" icon="el-icon-edit" @click="onlyDesk(scope.row)">打印小票</el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--      </el-table>-->
<!--      <div slot="footer" class="dialog-footer">-->
<!--        <el-button type="primary" @click="stopNowDesk">开始结账</el-button>-->
<!--        <el-button type="primary" @click="savestopDesk">关闭桌子</el-button>-->
<!--        <el-button @click="cancel">取 消</el-button>-->
<!--      </div>-->
<!--    </el-dialog>-->

    <el-dialog title="账单" :visible.sync="visibles" width="400px">
      <account :close.sync="visibles" :detail="accountDetail"></account>
    </el-dialog>
    <!-- 充值 -->
    <el-dialog title="充值" :visible.sync="recharge" width="500px">
      <rechargeDialog :close.sync="recharge" :details="details" @gocz="getOpenTableInfo"></rechargeDialog>
    </el-dialog>

    <!-- 修改开桌备注 -->
    <el-dialog title="修改开桌备注" :visible.sync="remarkVisible" :v-if="remarkVisible" width="500px">
      <el-form ref="remarkForm" :model="remarkForm" :rules="remarkRules" label-width="85px">
        <el-form-item label="开桌备注" prop="remark" required>
          <el-input v-model="remarkForm.remark" placeholder="请输入开桌备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="remarkVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitRemarkForm">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  addDesking,
  exportDesking,
  getChangList,
  getOpenTable,
  listDesking,
  stopTable,
  updateDesking
} from "@/api/mahjong/desking";
import {addOpenTableMember, delOpenDeskMember, getMember, listAll} from "@/api/mahjong/member";
import {
  cancelOpenTable,
  changeTableTime,
  checkout,
  coverDesk,
  listOpenAllMoney,
  removeMoney
} from "@/api/mahjong/record";
import {handlerdata} from "@/api/mahjong/utils";
import {
  changeRemark,
  changeTable,
  getTableList,
  mycaclDesk,
  suspend,
  tmpStopDesk,
  updateTableRemark
} from "@/api/mahjong/cost";
import dialogContent from './dialogContent';
import account from './zhangdan'
import {stopTime} from "../../../api/mahjong/record";
import rechargeDialog from '../member/rechargeDialog'

export default {
    name: "Desking",
    components: {dialogContent, rechargeDialog, account},
    data() {
      return {
        memberShow: false,
        recharge: false,
        reckonShow: false,
        remarkShow: false,
        checkout: false,
        remarkVisible: false,
        radio: '1',
        remark: '',
        remarkform: {},
        visible1: false,
        timeDialog: false,
        changeDialog: false,
        timeform: {},
        reckonform: {},
        selectOptions: ['现金', '余额', '扫码'],
        newTableId:'',
        details: {},
        tableList: [],
        accountDetail: {
          deskDetails: {},
          account: {}
        },
        commodityList: [],
        deskLists: [],
        idx: 0,
        mytitle: '101号桌详情',
        tab: [/*'修改备注',*/ '手动刷新', '修改备注', '停止计费', '结束开桌'],
        deskId: '',
        // 遮罩层
        loading: true,
        cjtjz1List: [],

        memberList: [],
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        detail: {},
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        openTableInfo: [],
        // 开桌情况表格数据
        deskingList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 来源字典
        sourceOptions: [],
        // 大小字典
        sizeOptions: [],
        // 模式字典
        modeOptions: [],
        integralOptions: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          source: undefined,
          size: undefined,
          mode: undefined,
          integral: undefined,
          deskId: undefined,
        },
        // 表单参数
        form: {},
        saveform: {},
        remarkForm: {},
        // 表单校验
        rules: {},
        remarkRules: {
          remark: [
            { required: true, message: "备注不能为空", trigger: "blur" }
          ],
        },
        visibles: false
      };
    },

    created(options) {
     this.deskId = this.$route.params && this.$route.params.ordersn;
     let that=this;
      setInterval(function() {
        that.calcDesk(that.deskId);
      }, 60000);
      this.calcDesk(this.deskId);
      this.getList();
      this.getDicts("source").then(response => {
        this.sourceOptions = response.data;
      });
      this.getDicts("open_size").then(response => {
        this.sizeOptions = response.data;
      });
      this.getDicts("majong_type").then(response => {
        this.modeOptions = response.data;
      });
      this.getOpenTableInfo();
      this.getmemberList();
      this.getMoneyList();
      this.initData()
    },
    methods: {
      //每分钟计算一次费用
      calcDesk(e){
        mycaclDesk(e).then(response => {

        });
      },

      stopNowDesk(){
        tmpStopDesk(this.deskId).then(response => {
          this.msgSuccess("账单已刷新");
        });
      },

      /**
       * 充值
       * @param row
       */
      chongzhi(row) {
        getMember(row.id).then(response => {
          this.details = response.data;
          this.recharge = true
        });
      },

      /** 删除商品按钮操作 */
      handleDeleteOrder(row) {
        const ids = row.id;
        this.$confirm('是否确认删除该数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return removeMoney(ids);
        }).then(() => {
          this.getMoneyList();
          this.msgSuccess("删除成功");
        }).catch(function () {
        });
      },
      //暂停计时密码
      saveReckon(e) {
        this.reckonform.status = e;
        this.reckonform.deskId = this.deskId;
        suspend(this.reckonform).then(response => {
          if (response.code == 200) {
            this.$message({
              type: 'success',
              message: response.msg
            });
          }
          this.getOpenTableInfo();
          this.reckonShow = false;
        });
      },

      statusFormat(row, column) {
        console.log(row.status)
        return row.status == 0 ? "未结算" : "已结算";
      },

      getSummaries(param) {
        const {columns, data} = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总价';
            return;
          }
          if(index === 5 || index === 6){
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += ' 元';
          } else {
            sums[index] = '';
          }
        });

        return sums;
      },
      saveRemark() {
        this.remarkform.orderSn = this.deskId + "";
        this.remarkform.remark = this.remark;
        changeRemark(this.remarkform).then(response => {
          if (response.code == 200) {
            this.$message({
              type: 'success',
              message: response.msg
            });
          }
          this.getOpenTableInfo();
          this.remarkShow = false;
        });
      },
      confirmTable() {
        this.form.newTableId=this.newTableId
        this.form.tableId=this.openTableInfo.tableId;
        this.form.orderNumber=this.deskId
        changeTable(this.form).then(response => {
          if (response.code == 200) {
            this.$message({
              type: 'success',
              message: response.msg
            });
          }
        });
        this.changeDialog = false
      },
      handleChange(e) {
        this.form.newTableId = e
        console.log(e)
        /* this.deskLists.map(item => {
           item.tTablenumbers.map(item1 => {
             if (e == item1.id) {

               this.form.orderNumber = item1.tOpenTable.bak2
               this.form.roomType = item1.roomType
             }
           })
         })*/
      },
      initData() {
        getTableList().then(response => {
          this.deskLists = response.data;
          this.form.roomId = response.data[0].id
          this.form.newTableId = response.data[0].tTablenumbers[0].id
        });
        getChangList().then(response => {
          this.tableList = response.data;
        });
      },
      saveTime(e) {
        this.timeform.orderSn = this.deskId;
        changeTableTime(this.timeform).then(response => {
          if (response.code == 200) {
            this.msgSuccess("时间修改成功！");
            this.timeDialog = false;
            this.getOpenTableInfo();
          } else {
            this.msgSuccess(response.msg);
          }
        });
      },
      getMember(e) {
        this.memberId = e;
        this.getMoneyList();
      },
      /**
       * 点单回调
       */
      getMoneyList() {
        this.getOpenTableInfo()
      },
      saveMember() {
        addOpenTableMember(this.saveform.memberId, this.deskId).then(response => {
          if (response.code == 200) {
            this.getOpenTableInfo();
            this.memberShow = false;
            this.msgSuccess("会员添加成功！");
          } else {
            this.msgSuccess(response.msg);
          }
        });

      },
      getmemberList() {
        listAll().then(response => {
          this.memberList = response.data;
        });
      },
      showMember() {
        this.memberShow = true;
      },
      //手动刷新、修改备注、停止计费、结束开桌
      change(index) {
        console.log('index',index)
        switch (index) {
          case 0:
            const loading = this.$loading({lock: true, text: '正在手动刷新中', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});
            setTimeout(() => {loading.close()}, 2000);
            this.getOpenTableInfo();
            this.calcDesk(this.deskId);
            this.loading = false;
            break
          case 1:
            this.remarkVisible = true
            break
          case 2:
            this.stopBilling(this.deskId)
            break
          case 3:
            this.saveStopDesk(this.deskId)
            break
        }
        // if (this.idx === index || index === undefined) {
        //   return false;
        // } else {
        //   this.idx = index;
        // }
      /*  if (index == 3) {
          this.changeDialog = true;
        }*/
        // if (index == 1) {
        //   let status = this.openTableInfo.stopStatus == '0' ? '1' : '0'
        //   this.gozt(status);
        // }
        /*  if (index == 3) {
            this.calelTable();
          }*/
        // if (index == 4) {
        //   this.reckonShow = true;
        //   /* this.timeDialog = true;*/
        // }
        // if (index == 1) {
        //   this.remarkShow = true;
        //   this.remarkform.remark = this.openTableInfo.remark;
        //   this.remarkform.orderSn = this.deskId;
        // }

      },

      //**取消开桌
      gozt(status) {
        stopTime(this.deskId, status).then(response => {
          this.msgSuccess(response.msg);
          if (response.code == 200) {
            this.getOpenTableInfo();
          }
        });
      },

      /**
       * 停止计费
       */
      stopBilling(deskId) {
        this.$confirm('是否确认要停止计费，确认后停止所有会员计费', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return stopTable(deskId);
        }).then((response) => {
          this.getOpenTableInfo()
          this.msgSuccess('已停止计费');
        }).catch(function () {
        });
      },

      gocancel() {
        this.$confirm('是否确认取消开桌', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return calelTable();
        }).then((response) => {
          this.msgSuccess(response.msg);
        }).catch(function () {
        });
      },
      calelTable() {
        cancelOpenTable(this.deskId).then(response => {
          this.msgSuccess(response.msg);
        });
      },

      //结束开桌
      stopDesk() {
        this.checkout = true;
      },

      setDesk(row) {
        let param = {};
        param.memberId = row.id;
        param.orderNumber = this.deskId;
        checkout(row.id, this.deskId).then(response => {
          this.getOpenTableInfo();
        });
      },
      //单人结账
      onlyDesk(row) {
        this.accountDetail.deskDetails = this.openTableInfo;
        this.accountDetail.deskDetails.setType = row.setType;
        let param = {};
        param.memberId = row.id;
        param.orderNumber = this.deskId;
        let deskMoeny = {'productName': '计时费用', 'money': this.openTableInfo.money}
        listOpenAllMoney(param).then(response => {
          if (response.code === 200) {

            console.log( response.data.dataList[0])
            console.log( response.data.dataList[1])
            this.accountDetail.account = response.data.dataList;
            this.accountDetail.account.unshift(deskMoeny);
            this.visibles = true
            this.accountDetail.deskDetails.totalmoney = parseInt(this.openTableInfo.money + response.data.money);
          } else {
            this.msgSuccess(response.msg);
          }
        });
        // checkout(row.memberId,this.deskId).then(response => {
        //   if(response.code==200){
        //     this.getOpenTableInfo();
        //   }
        // });
      },

      /**
       * 修改开桌备注
       */
      submitRemarkForm() {
        this.$refs["remarkForm"].validate(valid => {
          if (valid) {
            this.remarkForm.orderNumber = this.deskId
            updateTableRemark(this.remarkForm).then(response => {
                this.msgSuccess("修改成功");
                this.remarkVisible = false;
                this.getOpenTableInfo();
            });
          }
        });
      },

      //结束开桌
      saveStopDesk(deskId) {
        this.$confirm('是否确认要关闭桌子，确认后系统将为桌子未结账的用户进行结账扣款并关闭桌子？', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return coverDesk(deskId);
        }).then((response) => {
          this.$router.push('/gen/edit')
          this.msgSuccess('操作成功');
        }).catch(function () {
        });
      },

      loadintegral(e) {
        this.getDicts(e).then(response => {
          this.integralOptions = response.data;
        });
      },
      /**
       * 查询开桌详情
       */
      getOpenTableInfo() {
        getOpenTable(this.deskId).then(response => {
          this.openTableInfo = response.data;
          console.log(this.openTableInfo);
        });
      },


      /** 查询开桌情况列表 */
      getList() {

        // this.loading = true;

        /** 查询商品列表 */
        // this.loading = true;
        // listCommodity(this.queryParams).then(response => {
        //   this.commodityList = response.rows;
        //   this.total = response.total;
        //   this.loading = false;
        // });

        listDesking(this.queryParams).then(response => {
          this.deskingList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 来源字典翻译
      sourceFormat(row, column) {
        return this.selectDictLabel(this.sourceOptions, row.source);
      },
      // 大小字典翻译
      sizeFormat(row, column) {
        return this.selectDictLabel(this.sizeOptions, row.size);
      },
      // 模式字典翻译
      modeFormat(row, column) {
        return this.selectDictLabel(this.modeOptions, row.mode);
      },
      // 模式字典翻译
      jfFormat(row, column) {

        if (row.mode === 'america') {

          return handlerdata(row.integral, this.americanMahjongOptions);

        }
        if (row.mode === 'common') {
          return handlerdata(row.integral, this.ordinaryMahjongOptions);

        }
        if (row.mode === 'competition') {
          return handlerdata(row.integral, this.matchMahjongOptions);

        }
        if (row.mode === 'custom_integral') {
          return handlerdata(row.integral, this.customMahjongOptions);
        }


      },
      // 取消按钮
      cancel() {
        this.checkout = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          updateTime: undefined,
          updateBy: undefined,
          createTime: undefined,
          createBy: undefined,
          status: "0",
          bak3: undefined,
          bak2: undefined,
          bak1: undefined,
          source: undefined,
          startTime: undefined,
          finishTime: undefined,
          time: undefined,
          size: undefined,
          mode: undefined,
          integral: undefined,
          remark: undefined,
          deskId: undefined,
          id: undefined
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length != 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.memberShow = true;
        this.title = "添加开桌情况";
      },
      /** 点单按钮操作 */
      handleUpdate(row) {
        this.visible1 = true;
        this.title = `玩家${row.name}点单`;
        this.detail.orderNumber = this.deskId;
        this.detail.memberId = row.id;
      },
      /** 提交按钮 */
      submitForm: function () {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != undefined) {
              updateDesking(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                } else {
                  this.msgError(response.msg);
                }
              });
            } else {
              addDesking(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                } else {
                  this.msgError(response.msg);
                }
              });
            }
          }
        });
      },
      /** 删除会员按钮操作 */
      handleDelete(row) {
        let param = {};
        param.memberId = row.id;
        param.orderNumber = this.deskId;
        const name = row.name;
        console.log(param)
        this.$confirm('是否确认删除' + name + '该人员吗？删除后不在进行计费', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return delOpenDeskMember(param);
        }).then(() => {
          this.getOpenTableInfo();
          this.msgSuccess("删除成功");
        }).catch(function () {
        });
      },
      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出所有开桌情况数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return exportDesking(queryParams);
        }).then(response => {
          this.download(response.msg);
        }).catch(function () {
        });
      }
    }
  };
</script>
<style rel="stylesheet/scss" lang="scss">

  .tab {
    background-color: #fff;
    padding: 10px 20px;

    li {
      display: inline-block;
      width: 105px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #9C9186;
      font-size: 16px;
      cursor: pointer;

      &.on {
        background-color: #CAAB62;
        color: #fff;
        border-radius: 2px;
      }
    }
  }

  .pagination-container .el-pagination {
    position: static;
    text-align: center;
  }

  .pagination-container {
    height: auto;
  }
</style>
